<template>
<div>
 <header-com>分类列表</header-com>
  <div class="home">
    <ul class="left">
      <li v-for="(item,index) in classId" :key="index" @click="checkLi(item)" :class="{active: item._id == checkid}">{{item.title}}</li>
    </ul>
    <ul class="right">
      <li v-for="(item,index) in viewList" :key="index" @click="jump(item)">
        <img :src="item.s_pic" alt="" />
        <p>{{item.title}}</p>
        <p class="price">
          原价{{item.old_price}}，活动折扣后的价格为
          <i style="color: red">{{item.price}}</i>
        </p>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
// import axios from 'axios';
import headerCom from '../components/headerCom.vue';
export default {
  name: "Home",
  components:{
    headerCom
  },
  data() {
    return {
      checkid: 0, // 选中分类的id
      classId:[], // 存放分类的信息
      goodsList: [], // 存放商品信息
      viewList: [], // 存放选中的分类的商品数据
    }
  },
  watch:{
    checkid(){ // 只要选中的id发生改变 就会触发该函数
      this.viewList = this.goodsList.filter(item => item.cid == this.checkid);
    }
  },
  created() {
    this.$axios.get('list.json').then(res => {
      // console.log(res);
      this.goodsList = res.data.result;
      // console.log(this.goodsList);
    })
    this.$axios.get('fenlei.json').then(res => {
      // console.log(res);
      this.classId = res.data.result;
      // console.log(this.classId[0]);
      // this.checkLi(this.classId[0])
      this.checkid = this.classId[0]._id;
      // this.viewList = this.goodsList.filter(item => item.cid == this.checkid);
      // console.log(this.classId);
    })
    
  },
  methods: {
    checkLi(val){
      // console.log(val);
      this.checkid = val._id;
      // item 是数组的每一项
      // this.viewList = this.goodsList.filter(item => item.cid == this.checkid);
      // console.log(this.viewList);
    },
    jump(val){ // query params 两种传参的方式
      // this.$router.push({path:'/detail',query:{obj:val}})
      this.$router.push({name:'Detail',params:{obj:val}})
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  height: 100%;
  .left {
    width: 100px;
    height: 100%;
    border: 1px solid #ccc;
  }
  .right {
    flex: 1;
    height: 100%;
    overflow: auto;
    // width: calc(100% - 100px);
    // calc
  }
  li {
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    list-style: none;
  }
  .price {
    font-size: 12px;
  }
  .active {
    background: skyblue;
  }
}
</style>